/*
 * 多选框组件
 */
const checkboxTemplate = `
<div class="radio-box">
  <input type="checkbox" :checked="isCheck" @change="change" :id="label">
  <label :for="label" class="radio-stype check-box"></label><span> <slot /> </span>
</div>
`;
Vue.component("my-checkbox", {
  template: checkboxTemplate,
  props: ["label", "value"],
  // TODO 请在此继续完成组件代码的编写
  data() {
    return {
      isCheck: false,
      checkList: [],
    };
  },
  watch: {
    value(arr) {
      this.checkList = arr;
      this.checkMatch();
    },
    checkList(arr) {
      this.$emit("input", arr);
    },
  },
  mounted() {
    this.checkList = this.value || [];
    this.checkMatch();
  },
  methods: {
    checkMatch() {
      this.isCheck = this.checkList.includes(this.label);
    },
    change(e) {
      if (e.target.checked) {
        this.checkList.push(this.label);
      } else {
        this.checkList.splice(this.checkList.indexOf(this.label), 1);
      }
    },
  },
});
